<template>
	<view class="body-view">
		<!-- 使用scroll-view实现tabs滑动切换 -->
		<!-- <scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent">
			<view class="menu-topic-view" v-for="(item,index) in tabs" :id="'tabNum'+item.id" :key="index" @click="swichMenu(item.id)">
				<view :class="currentTab==(item.id) ? 'menu-topic-act' : 'menu-topic'">
					<text class="menu-topic-text">{{item.name}}</text>
					<view class="menu-topic-bottom">
						<view class="menu-topic-bottom-color"></view>
					</view>
				</view>
			</view>
		</scroll-view> -->
		<!-- <u-tabs style="margin-top: 20rpx; background-color: #fff; width: 100%;" :list="tabs" @click="swichMenu"></u-tabs> -->
		<!-- 列表数据跟随tab切换而切换 -->
		<!-- //重点实验室 -->
		<u-sticky bgColor="#e1e1e1">
			<u--form :model="queryParams" style="width: 80%; margin: 0 auto">
				<u-form-item>
					<u--input v-model="queryParams.name" placeholder="请输入关键字搜索"></u--input>
					<u-button slot="right" text="搜索" type="primary" @click="goSearch"></u-button>
				</u-form-item>
			</u--form>
		</u-sticky>
		<view class="no-data" v-if="swiperDateList.length == 0" @click="getMyReportData">
			<!-- <image mode="aspectFit" class="no-data-img"></image> -->
			{{ noData }}
		</view>
		<scroll-view scroll-y="true" class="list-content" @scrolltolower="scrolltolower()" @scrolltoupper="scrolltoupper()">
			<view class="member_lsit">
				<!-- 科技园区 -->
				<view class="video_item" v-for="(item, index) in swiperDateList" :key="index" @click="plateDetail(item.innId)">
					<!-- <image class="video_img" :src="item.pictureUrl" @click="plateDetail(item.id)"></image> -->
					<view class="video_content">
						<view>
							<text class="video_title">{{ item.innName }}</text>
							<uni-tag size="small" type="success" style="margin-top: 25rpx; float: right" :text="getType(item.innType)"></uni-tag>
						</view>

						<view>
							<text class="publicTime">主导产业：{{ item.primeMoverIndustyr }}</text>
						</view>
					</view>
					<!-- <image src='http://113.142.144.25:9301/statics/appimg/icon_dial_new.png' style="height: 45rpx;width: 45rpx; float: right;margin-top: 15rpx;margin-right: 15rpx;" @click="call(item.contactsPhone)"></image> -->
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import env from '../../../../utils/env.js';
import orderTabBar from '@/wxcomponents/tab_bar.vue';
import * as zone from '@/api/innovate/zone.js';
import uniTag from '@/components/uni-tag/components/uni-tag/uni-tag.vue';
import * as data from '@/api/system/dict/data.js';

export default {
	components: {
		orderTabBar,
		uniTag
	},
	data() {
		return {
			noData: '加载中',
			scrollH: 200,
			// 当前选择tab项
			currentIndex: 0,
			parkTypeList: [],
			// 当前查询状态
			currentStatus: '',
			tabs: [
				{
					id: 0,
					name: '全部',
					code: 'all'
				},
				{
					id: 1,
					name: '国家级',
					code: 'GJJ'
				},
				{
					id: 2,
					name: '省级',
					code: 'SJ'
				},
				{
					id: 3,
					name: '市级',
					code: 'BSJ'
				}
			],
			query: {
				pageSize: 10,
				pageNum: 1,
				status: 3
			},
			currentTab: 0,
			tabCurrent: 'tabNum0',
			// Tab切换内容
			swiperDateList: [],
			total: 0,
			queryParams: {}
		};
	},
	onLoad() {
		this.getData();
		this.getMyReportData();
	},
	methods: {
		goSearch() {
			this.swiperDateList = [];
			this.query.pageNum = 1;
			this.getMyReportData();
		},
		swichMenu(item) {
			console.log(item);
		},
		getData() {
			data.getDicts('park_type').then((res) => {
				this.parkTypeList = res.data;
			});
			// console.log(this.parkTypeList)
		},
		onChangeTab(e) {
			this.currentTab = id;
			this.tabCurrent = 'tabNum' + id;
			this.swiperDateList = [];
			this.getMyReportData();
		},
		getMyReportData() {
			this.noData = '加载中。。。'
			let data = this.query;
			if (this.queryParams.name) {
				data.searchValue = this.queryParams.name;
			} else {
				delete data.searchValue;
			}
			zone.listZone(this.query).then((res) => {
				res.rows.forEach((v) => {
					this.swiperDateList.push(v);
				});
				uni.hideLoading({});
				this.total = res.total;
				if(this.swiperDateList.length===0){
					this.noData = '暂无数据，点击重试'
				}
			});
		},
		scrolltolower() {
			if (this.swiperDateList.length < this.total) {
				this.query.pageNum = this.query.pageNum + 1;
				this.getMyReportData();
			} else {
				uni.showToast({
					icon: 'error',
					title: '暂无更多数据！'
				});
			}
		},
		scrolltoupper() {
			// this.query.pageNum = 1
			// this.getMyReportData()
		},
		getType(type) {
			var persontype = '';
			this.parkTypeList.forEach((v) => {
				if (v.dictValue == type) persontype = v.dictLabel;
			});
			return persontype;
		},
		plateDetail(id) {
			console.log(id);
			uni.navigateTo({
				url: '/subpages/pages/detail/plante_detail?id=' + id
			});
		}
	}
};
</script>

<style scoped lang="scss">
.no-data {
	width: 100%;
	height: 300rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	margin-top: 100rpx;
}
.no-data .no-data-img {
	width: 300rpx;
	height: 268rpx;
}
.tab-bar {
	width: 93%;
	border-radius: 15rpx;
}

.body-view {
	height: 100vh;
	width: 100%;
	// display: flex;
	background-color: #e0e0e0;
	flex: 1;
	// flex-direction: column;
	// justify-content: center;
	// align-items: center;
	background-color: #e1e1e1;
}

.top-menu-view {
	display: flex;
	position: fixed;
	top: 0rpx;
	left: 0;
	white-space: nowrap;
	width: 100%;
	background-color: #ffffff;
	height: 86rpx;
	line-height: 86rpx;
	border-top: 1rpx solid #d8dbe6;

	.menu-topic-view {
		display: inline-block;
		white-space: nowrap;
		height: 86rpx;
		position: relative;

		.menu-topic-text {
			font-size: 30rpx;
			color: #303133;
			padding: 10rpx 40rpx;
		}

		.menu-topic-act {
			margin-left: 30upx;
			margin-right: 10upx;
			position: relative;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.menu-topic-bottom {
			position: absolute;
			bottom: 10rpx;
			width: 100%;
		}

		.menu-topic-bottom-color {
			width: 100rpx;
			height: 4rpx;
			color: #016fb8;
		}

		.menu-topic-act .menu-topic-bottom {
			display: flex;
			justify-content: center;
		}

		.menu-topic-act .menu-topic-bottom-color {
			background: #016fb8;
		}
	}
}

.name {
	display: -webkit-inline-box;
	width: 60%;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1; //显示几行
}

.city {
	float: right;
}

.scroll-view-height {
	/* 页面高度减去包含状态栏、标题、tab组件的高度 */
	height: 100%;
	// margin-top: 28%;
}

.list-content {
	// background-color: #e0e0e0;
	// margin-top: 80rpx;
}

.member_lsit {
	height: fit-content;
	width: 95%;
	margin: 25rpx auto;
	border-radius: 15rpx;
}

.video_item {
	height: 130rpx;
	width: 96%;
	padding: 15rpx;
	margin: 15rpx auto;
	border-radius: 10rpx;
	background-color: #fff;
	box-shadow: 5rpx 0rpx 10rpx #e3e3e3;
}

.video_img {
	margin-top: 50rpx;
	height: 190rpx;
	width: 260rpx;
	margin-left: 20rpx;
	float: left;
}

.video_content {
	width: 95%;
	height: 140rpx;
	margin-left: 15rpx;
	margin-right: 15rpx;
}

.video_content_cxtd {
	width: 80%;
	height: 140rpx;
	float: left;
	margin-left: 15rpx;
	margin-right: 15rpx;
}

.video_title {
	float: left;
	display: -webkit-box;
	font-size: 33rpx;
	liheight: 40rpx;
	font-weight: 700;
	margin-top: 25rpx;
	white-space: nowrap;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical; /*排列方式*/
	-webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/
}

.publicTime {
	width: 100%;
	float: left;
	font-size: 23rpx;
	color: #a1a1a1;
	margin-top: 15rpx;
}
</style>
